<template>
    <div class="myhead">
      <h2>My ToDo List</h2>
      <div class="box">
        <input
          type="text"
          placeholder="请输入待办事项..."
          class="thing"
          v-model="newItem"
          @keyup.enter="$emit('add-todo', newItem)"
        >
        <button class="add" @click="$emit('add-todo', newItem)">添加</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const newItem = ref('')
  
  // 向外暴露 clearInput 方法
  defineExpose({ clearInput: () => { newItem.value = '' } })
  </script>
  <style scoped>
.myhead {
    background-color: #0b87ff;
    text-align: center;
    padding: 5px 0px 10px 0px;
    color: aliceblue;
}

.myhead .box {
    margin-top: 10px;
    display: flex;
    gap: 5px;
    justify-content: center;
}

.thing {
    width: 300px;
    height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    outline: none;
    border: solid 1px white;
}

.add {
    display: inline-block;
    width: 80px;
    height: 30px;
    background-color: #eee;
    color: #0b87ff;
    line-height: 30px;
    border: none;
    border-radius: 3px;
}

.add:hover {
    cursor: pointer;
    background-color: #fff;
    color: #ff6700;
}
  </style>